<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .room {
      display:flex;
      justify-content:space-around;
      width: 80%;
      height: 500px;
      padding: 25px 0;
      background: gray;
      box-sizing: border-box;
    }
    .bed {
      max-width: 70%;
      width: 30%;
      height: 450px;
      background: rgb(184, 37, 37);
    }
  </style>
</head>
<body>
  <div id="root">
    <div>
      宾馆套餐:
      <select v-model.number="selected">
        <option v-for="option in options" :value="option.id">{{option.name}}:{{option.price}}</option>
      </select>
    </div>
    <button @click="changeRoomOption">一键改价</button>
     价格： {{roomPrice}}
    <div class="room">
      <div v-for="bed in selected" class="bed" :key="bed"></div>
    </div>
    <div>
      <button @click="changeNums">一键数字</button>
      <span v-for="num in nums" :key="num">{{num}}</span>
    </div>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      options: [
        { 
          id: '1',
          name: '单人间',
          price: '$100'
        },
        { 
          id: '2',
          name: '双人间',
          price: '$120'
        },
        { 
          id: '3',
          name: '三人间',
          price: '$130'
        },
      ],
      selected: 1,
      nums: [1,2,3,4,5,6]
    },
    computed: {
      roomPrice() {
        const room = this.options.find(item => {
          console.log(item, item.id, this.selected)
          return Number(item.id) === this.selected
        })
        console.log(room.price)
        return room.price || '没有找到'
      }
    },
    methods: {
      changeRoomOption() {
        this.options[0].price = "$10000"
      },
      changeNums() {
        // this.nums[0] = 100
        this.$set(this.nums, 0, 100)
        // this.$forceUpdate()
        console.log('this.nums', this.nums)
      },
    }
  });
  
</script>
